<template>
  <div class="text">
    <el-form :model="dataForm" :rules="dataRule" ref="passwordForm" label-width="80px" style="width:500px">
      <el-form-item prop="newPassword" :label="$t('updatePassword.newPassword')" :show-message="!valid_password">
        <el-input v-model="dataForm.newPassword" type="password" @input="p_len"
          :placeholder="$t('updatePassword.newPassword')"></el-input>
        <span
          v-bind:class="{ show_password_length: typed, pwd_level1:pwdLevel===1, pwd_level2:pwdLevel===2, pwd_level3:pwdLevel===3, pwd_level4:pwdLevel===4}"
          class="password_length">{{pwdLevel===1?$t('updatePassword.pwdLevel1'):pwdLevel===2?$t('updatePassword.pwdLevel2'):pwdLevel===3?$t('updatePassword.pwdLevel3'):$t('updatePassword.pwdLevel4')}}</span>
        <div class="lnu_container">
          <p v-bind:class="{ number_valid: contains_number }">{{$t('updatePassword.number')}}</p>
          <p v-bind:class="{ lovercase_valid: contains_lovercase }">{{$t('updatePassword.lovercase')}}</p>
          <p v-bind:class="{ uppercase_valid: contains_uppercase }">{{$t('updatePassword.uppercase')}}</p>
          <p v-bind:class="{ special_valid: contains_special }">{{$t('updatePassword.special')}}</p>
        </div>
      </el-form-item>
      <el-form-item prop="comfirmPassword" :label="$t('updatePassword.comfirmPassword')">
        <el-input v-model="dataForm.comfirmPassword" type="password"
          :placeholder="$t('updatePassword.comfirmPassword')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="passwordFormSubmitHandle()" :loading="loading">
          下一步
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import {
  validateMobile
} from '@/utils/validate'
import password from '@/mixins/view-password'

export default {
  mixins: [password],
  data () {
    return {
      loading: false,
      dataForm: {
        password: '',
        newPassword: '',
        comfirmPassword: '',
        code: '',
        // email: '',
        mobile: ''
      }
    }
  },
  computed: {
    dataFormRule () {
      return {
        mobile: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
          { required: true, validator: validateMobile, trigger: 'blur' }
        ],
        code: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
          { min: 6, message: '请输入6位验证码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {

  },
  methods: {
    init (data) {
      this.dataForm.mobile = data.mobile
      this.dataForm.code = data.code
      console.log(this.dataForm)
    },
    // 提交注册
    passwordFormSubmitHandle: debounce(function () {
      this.loading = true
      this.$refs.passwordForm.validate((valid) => {
        if (!valid) {
          this.loading = false
          return false
        }
        console.log(this.dataForm)
        this.dataForm.password = this.dataForm.newPassword
        let url = '/resetPassword/mobile'
        if (this.dataForm.email) {
          url = '/resetPassword/email'
        }
        this.$http.post(url, this.dataForm).then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return false
          }
          this.$emit('next')
        }).catch((err) => {
          this.loading = false
          console.error(err)
          this.$message.error('系统异常，请联系管理员')
        })
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style scoped>
.password_length {
  padding: 2px 10px;
  line-height: 20px;
  position: absolute;
  top: 24%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #fbd490;
  color: rgba(71, 87, 98, 0.8);
  border-radius: 4px;
  font-size: 13px;
  display: none;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

.valid_password_length {
  background: #00ad7c;
  color: rgba(255, 255, 255, 0.9);
}

.pwd_level1,
.pwd_level2 {
  background: #f56c6c;
  color: rgba(255, 255, 255, 0.9);
}

.pwd_level3 {
  background: #e6a23c;
  color: rgba(255, 255, 255, 0.9);
}

.pwd_level4 {
  background: #5cb85c;
  color: rgba(255, 255, 255, 0.9);
}

.show_password_length {
  display: block;
}

.lnu_container {
  width: 420px;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.lnu_container p {
  width: 100px;
  height: auto;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  border-radius: 2px;
  color: rgba(71, 87, 98, 0.8);
  background: -webkit-linear-gradient(left, #00ad7c 50%, #eee 50%);
  background: linear-gradient(to right, #00ad7c 50%, #eee 50%);
  background-size: 201% 100%;
  background-position: right;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.lovercase_valid,
.number_valid,
.uppercase_valid,
.special_valid {
  background-position: left !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.valid_password_container {
  display: block;
  margin: 10px auto;
  border-radius: 4px;
  position: relative;
  background: #00ad7c;
  width: 20px;
  height: 20px;
  visibility: hidden;
  opacity: 0;
}
</style>
